<template>
  <div class="food-list" v-if="index === 0">
    <van-tree-select
      v-model:main-active-index="activeIndex"
      height="88vw"
      :items="items"
      @click-nav="vanTreeIndex"
    >
      <template #content>
        <div v-for="(item, index) in subItem" :key="index">
          <ListItem
            :FoodItem="item"
            :handleAdd="handleAdd"
            :handleChange="handleChange"
            :isCheckBox="false"
          ></ListItem>
        </div>
      </template>
    </van-tree-select>
  </div>
  <div v-else>{{ FoodData.content }}</div>
</template>

<script setup>
const props = defineProps(["index", "FoodData"]);
import { ref, reactive, toRefs } from "vue";
// import FoodListItem from "./FoodListItem.vue";
import ListItem from "@/components/ListItem.vue"; //将FoodListItem抽离到了公共组件的ListItem中了，方便购物车复用
const activeIndex = ref(0);
let items = reactive([{ text: "分组 1" }, { text: "分组 2" }]);
let subItem = reactive([""]);
// 初始化数据替换掉items的每一项text

const initData = () => {
  let newArry = [];
  props.FoodData.items?.forEach((item, index) => {
    newArry.push({ text: item.text });
    // 将右侧点击到的菜单项的索引值与右侧内容区展示的索引值对应
    if (activeIndex.value === index) {
      subItem = item.children;
    }
  });
  items = newArry;
};
initData();
//
function vanTreeIndex(i) {
  // console.log(activeIndex);
  activeIndex.value = i;
  initData();
}
// 处理加号图标的隐藏
function handleAdd(id) {
  subItem.forEach((item) => {
    if (item.id === id) {
      item.add = false;
      item.num += 1;
    }
  });
}
// 步进器的值修改数据的值
function handleChange(val, detail) {
  console.log(val, detail);
  subItem.forEach((item) => {
    if (item.id === detail.name) {
      item.num = val;
    }
  });
  console.log(subItem);
}
</script>

<style lang="less" scoped></style>
